<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
<div id="formBox" class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-aerchant-edit" th:object="${payUserAll}">
        <input id="id" name="id" th:field="*{id}" class="form-control" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label">用户账号：</label>
            <div class="col-sm-8">
                <input id="userLoginName" name="userLoginName" th:field="*{userLoginName}" class="form-control"
                       type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商户状态：</label>
            <div class="col-sm-8">
                <select name="accoutState" class="form-control m-b" th:with="type=${@dict.getType('pay_accout_state')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{accoutState}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">邀请代理编号：</label>
            <div class="col-sm-8">
                <input id="inviteId" name="inviteId" th:field="*{inviteId}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">姓名：</label>
            <div class="col-sm-8">
                <input id="realname" name="realname" th:field="*{realname}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">手机号码：</label>
            <div class="col-sm-8">
                <input id="phonenumber" name="phonenumber" th:field="*{phonenumber}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">行业：</label>
            <div class="col-sm-8">
                <input id="industry" name="industry" th:field="*{industry}" class="form-control" type="text">
            </div>
        </div>
        <div v-show="authType == '1'" class="form-group">
            <label class="col-sm-3 control-label">身份证正面：</label>
            <div class="col-sm-8">
                <img id="certImgFont" :src="certImgFont" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
            </div>
        </div>
        <div v-show="authType == '1'" class="form-group">
            <label class="col-sm-3 control-label">身份证背面：</label>
            <div class="col-sm-8">
                <img id="certImgBack" :src="certImgBack" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
            </div>
        </div>
        <div v-show="authType == '2'" class="form-group">
            <label class="col-sm-3 control-label">护照照片：</label>
            <div class="col-sm-8">
                <img id="certImgPass" :src="certImgPass" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">实名认证状态：</label>
            <div class="col-sm-8">
                <select name="certState" class="form-control m-b"  th:with="type=${@dict.getType('pay_user_cert_state')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{certState}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">自我介绍：</label>
            <div class="col-sm-8">
                <input id="profile" name="profile" th:field="*{profile}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">入金手续费率：</label>
            <div class="col-sm-8">
                <input id="inRate" name="inRate" th:field="*{inRate}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">出金手续费率：</label>
            <div class="col-sm-8">
                <input id="outRate" name="outRate" th:field="*{outRate}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商户上调汇率：</label>
            <div class="col-sm-8">
                <input id="tokinRate" name="tokinRate" th:field="*{tokinRate}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">入金方式：</label>
            <div class="col-sm-8">
                <select name="payType" class="form-control m-b" th:with="type=${@dict.getType('pay_type')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{payType}"></option>
                </select>
            </div>
        </div>
    </form>
</div>
<script th:src="@{/js/vue.min.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/ajaxupload.js}"></script>
<div th:include="include::footer"></div>
<script type="text/javascript">
    var prefix = ctx + "manager/user";
    var roleid = "5";
    $("#form-aerchant-edit").validate({
        rules: {
            userLoginName: {
                required: true,
                minlength: 2,
                maxlength: 20,
                remote: {
                    url: ctx + "manager/user/checkLoginNameUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        login_name: function () {
                            return $.common.trim($("#userLoginName").val());
                        }
                    },
                    dataFilter: function (data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
            accoutState: {
                required: true
            },
            realname: {
                required: true
            },
            phonenumber: {
                required: true
            },
        },
        messages: {
            "userLoginName": {
                remote: "用户已经存在"
            }
        }
    });

    function submitHandler() {
        if ($.validate.form()) {
            var params = $('#form-aerchant-edit').serialize();
            params += '&certImgFont=' + modelBean.certImgFont;
            params += '&certImgBack=' + modelBean.certImgBack;
            params += '&certImgPass=' + modelBean.certImgPass;
            $.operate.save(prefix + "/edit", params);
        }
    }

    var modelBean = {
        certImgFont: '',
        certImgBack: '',
        certImgPass: '',
    };

    var vm = new Vue({
        el: '#formBox',
        data: {
            authType: '[[${authType}]]',
            certImgFont: ctx + ('[[${payUserAll.certImgFont}]]' ? '[[${payUserAll.certImgFont}]]' : 'img/no_img.png'),
            certImgBack: ctx + ('[[${payUserAll.certImgBack}]]' ? '[[${payUserAll.certImgBack}]]' : 'img/no_img.png'),
            certImgPass: ctx + ('[[${payUserAll.certImgPass}]]' ? '[[${payUserAll.certImgPass}]]' : 'img/no_img.png'),
        },
        methods: {}
    });

    $(function () {
        new AjaxUpload('#certImgFont', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_auth_img',
                type: 'auth',
                state: '0',
                puth: '11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.certImgFont = ctx + r.url;
                    modelBean.certImgFont = r.url;
                } else {
                    alert(r.msg);
                }
            }
        });

        new AjaxUpload('#certImgBack', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_auth_img',
                type: 'auth',
                state: '0',
                puth: '11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.certImgBack = ctx + r.url;
                    modelBean.certImgBack = r.url;
                } else {
                    alert(r.msg);
                }
            }
        });

        new AjaxUpload('#certImgPass', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_auth_img',
                type: 'auth',
                state: '0',
                puth: '11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.certImgPass = ctx + r.url;
                    modelBean.certImgPass = r.url;
                } else {
                    alert(r.msg);
                }
            }
        });
    });

</script>
</body>
</html>
